<!--组件：基础信息表单-->
<!--created by lx 2023/6/13-->
<template>
  <div style="display: flex; justify-content: center; margin: 24px">
    <a-form
      ref="formRef"
      :model="basicForm"
      :label-col-props="{ span: 5 }"
      :wrapper-col-props="{ span: 18 }"
      style="width: 600px"
      :rules="rules"
    >
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="表名称" field="tableName">
            <a-input v-model="basicForm.tableName" placeholder="请输入表名称" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="表描述" field="tableComment">
            <a-input
              v-model="basicForm.tableComment"
              placeholder="请输入表描述"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="实体类名称" field="className">
            <a-input
              v-model="basicForm.className"
              placeholder="请输入实体类名称"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="作者" field="author">
            <a-input v-model="basicForm.author" placeholder="请输入作者" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="备注" field="remark">
            <a-textarea
              v-model="basicForm.remark"
              placeholder="请输入备注"
              :auto-size="{ minRows: 4, maxRows: 10 }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item>
            <a-space>
              <a-button @click="back">返回</a-button>
              <a-button type="primary" @click="validate">保存</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup lang="ts" name="BasicInfoEdit">
  import { PropType, ref, watch } from 'vue';

  interface BasicFormModel {
    tableName: string; // 表名称
    tableComment: string; // 表描述
    className: string; // 实体类名称
    author: string; // 作者
    remark: string; // 备注
  }
  const props = defineProps({
    form: {
      type: Object as PropType<BasicFormModel>,
      default: () => {
        // empty
      },
    },
  });
  const emits = defineEmits(['back', 'save']);

  const formRef = ref<any>();
  const grenerateFormModel = (initForm?: BasicFormModel) => {
    return {
      tableName: initForm?.tableName || '',
      tableComment: initForm?.tableComment || '',
      className: initForm?.className || '',
      author: initForm?.author || '',
      remark: initForm?.remark || '',
    };
  };
  const rules = {
    tableName: [{ required: true, message: '请输入表名称' }],
    tableComment: [{ required: true, message: '请输入表描述' }],
    className: [{ required: true, message: '请输入实体类名称' }],
    author: [{ required: true, message: '请输入作者' }],
  };
  const basicForm = ref(grenerateFormModel());
  const initForm = () => {
    basicForm.value = grenerateFormModel(props.form);
  };

  // onMounted(() => initForm());
  watch(
    () => props.form,
    () => {
      initForm();
    }
  );

  const back = () => {
    emits('back');
  };
  const validate = async () => {
    const errors = await formRef.value.validate();
    if (!errors) {
      emits('save', basicForm.value);
    }
  };
</script>
